import React, { useEffect, useState } from 'react';
import { Select } from 'antd';
import type { SelectProps } from 'antd';
import { getCategoryList } from './sevice';

const { Option } = Select;
interface categoryType {
  name: string;
  ID: number;
}
const CategorySelect = (props: SelectProps) => {
  const [list, setList] = useState([]);
  const fetchList = async () => {
    try {
      const res = await getCategoryList();
      if (res.success) {
        setList(res.data);
        return true;
      } else {
        return false;
      }
    } catch (error) {
      return false;
    }
  };
  useEffect(() => {
    fetchList();
  }, []);
  return (
    <Select allowClear size="large" placeholder="选择商品分类" style={{ width: 256 }} {...props}>
      {list?.map((category: categoryType) => {
        return (
          <Option key={category.ID} value={category.ID}>
            {category.name}
          </Option>
        );
      })}
    </Select>
  );
};

export default CategorySelect;
